<style>
  html,
  body {
    background-color: #f6f8fa;
  }
</style>
<div id="app">
  <div class="flex items-center p2">
    <div style="flex: 1">
      <a href="javascript:history.go(-1)" class="weui-btn weui-btn_mini weui-btn_default"> 返回 </a>
    </div>
    <button v-if="send._id" @click="removeSend" class="weui-btn weui-btn_mini weui-btn_warn">删除</button>
  </div>

  <div class="bg-white p1 m1 rounded">
    <div class="weui-cells__title">发送规则</div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">任务备注</label>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="send.name" placeholder="群发任务备注" />
        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">发送模式</label>
        </div>
        <div class="weui-cell__bd">
          <div class="">
            <div @click="send.mode=1" class="btn btn-small"
              v-bind:class="{'is-disabled': send.mode!=1, 'btn-outline': send.mode!=1, 'btn-primary': send.mode==1}">
              手动
            </div>
            <!-- <div class="btn btn-outline btn-small is-disabled">定时</div> -->
            <div @click="send.mode=2" class="btn btn-small"
              v-bind:class="{'is-disabled': send.mode!=2, 'btn-outline': send.mode!=2, 'btn-primary': send.mode==2}">
              定期
            </div>
          </div>
        </div>
      </div>

      <div class="weui-cell" v-if="send.mode==2 ">
        <div class="weui-cell__hd">
          <label class="weui-label">发送周期</label>
        </div>
        <div class="weui-cell__bd">
          <div class="">
            <div @click="send.month=0" class="btn btn-small"
              v-bind:class="{'is-disabled': send.month!=0, 'btn-outline': send.month!=0, 'btn-primary': send.month==0}">
              按周
            </div>
            <!-- <div class="btn btn-outline btn-small is-disabled">定时</div> -->
            <div @click="send.month=1" class="btn btn-small"
              v-bind:class="{'is-disabled': send.month!=1, 'btn-outline': send.month!=1, 'btn-primary': send.month==1}">
              按月
            </div>
          </div>
        </div>
      </div>

      <div class="weui-cell" v-if="send.mode==2 && send.month !=1">
        <div class="weui-cell__hd">
          <label class="weui-label">发送日</label>
        </div>
        <div class="weui-cell__bd">
          <div class="">
            <div @click="send.weekdays[1] = !send.weekdays[1] "
              v-bind:class="{'is-disabled': !send.weekdays[1], 'btn-outline': !send.weekdays[1], 'btn-primary': send.weekdays[1]}"
              class="btn btn-outline btn-small">
              周一
            </div>
            <div @click="send.weekdays[2] = !send.weekdays[2] "
              v-bind:class="{'is-disabled': !send.weekdays[2], 'btn-outline': !send.weekdays[2], 'btn-primary': send.weekdays[2]}"
              class="btn btn-outline btn-small">
              周二
            </div>
            <div @click="send.weekdays[3] = !send.weekdays[3] "
              v-bind:class="{'is-disabled': !send.weekdays[3], 'btn-outline': !send.weekdays[3], 'btn-primary': send.weekdays[3]}"
              class="btn btn-outline btn-small">
              周三
            </div>
            <div @click="send.weekdays[4] = !send.weekdays[4] "
              v-bind:class="{'is-disabled': !send.weekdays[4], 'btn-outline': !send.weekdays[4], 'btn-primary': send.weekdays[4]}"
              class="btn btn-outline btn-small">
              周四
            </div>
            <div @click="send.weekdays[5] = !send.weekdays[5] "
              v-bind:class="{'is-disabled': !send.weekdays[5], 'btn-outline': !send.weekdays[5], 'btn-primary': send.weekdays[5]}"
              class="btn btn-outline btn-small">
              周五
            </div>
            <div @click="send.weekdays[6] = !send.weekdays[6] "
              v-bind:class="{'is-disabled': !send.weekdays[6], 'btn-outline': !send.weekdays[6], 'btn-primary': send.weekdays[6]}"
              class="btn btn-outline btn-small">
              周六
            </div>
            <div @click="send.weekdays[0] = !send.weekdays[0] "
              v-bind:class="{'is-disabled': !send.weekdays[0], 'btn-outline': !send.weekdays[0], 'btn-primary': send.weekdays[0]}"
              class="btn btn-outline btn-small">
              周日
            </div>
            <!-- <div class="btn btn-outline btn-small">签到</div> -->
          </div>
        </div>
      </div>

      <div class="weui-cell" v-if="send.mode==2  && send.month==1">
        <div class="weui-cell__hd">
          <label class="weui-label">发送日</label>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="send.days" placeholder="输入1-31，多天数空格隔开" />
        </div>
      </div>

      <div class="weui-cell" v-if="send.mode==2">
        <div class="weui-cell__hd">
          <label class="weui-label">发送时间</label>
        </div>
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="send.daytime" placeholder="时间格式 08:05, 多个时间点空格隔开" />
        </div>
      </div>
    </div>
  </div>

  <div class="m1 p1 rounded bg-white">
    <div class="weui-cells__title">发送群聊 选中群<span class="orange">{{send.rooms.length}}</span>个</div>
    <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div v-for="room in activerooms"
            v-bind:class="{'is-disabled': !send.rooms.includes(room.id),  'btn-outline': !send.rooms.includes(room.id), 'btn-primary': send.rooms.includes(room.id)}"
            class="btn btn-small" style="margin-right: 4px" @click="toggleRoom(room)">
            {{room.topic}}
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="m1 p1 rounded bg-white">
    <div class="weui-cells__title flex items-end">
      <div style="flex: 1">发送内容</div>
      <div class="weui-btn weui-btn_mini weui-btn_default" @click="showMessages=true">选择内容素材</div>
    </div>
    <div class="weui-cells">
      <div v-for="message, i in send.messages" class="weui-cell">
        <div class="weui-cell__bd">
          <message v-bind:message="message"></message>
        </div>
        <div class="weui-cell__ft">
          <a class="weui-btn weui-btn_mini weui-btn_warn" @click="removeMessage(i)">删除</a>
        </div>
      </div>

    </div>
    <div class="m1 p1 blue rounded bold font-13" style="background-color: rgb(243, 218, 155)">
      微信私聊发送文字, 图片, 小程序到机器人, 即可添加到素材库.
    </div>
  </div>

  <div class="m1 p1 rounded bg-white">
    <div @click="saveSend" class="weui-btn weui-btn_primary">保存</div>
  </div>

  <div v-show="showMessages">
    <div @click="showMessages=false" class="fixed bottom-0 top-0 right-0 left-0 z1 bg-black" style="opacity: 0.5"></div>

    <div v-show="showMessages" class="fixed top-0 bottom-0 relative pb4 right-0 z2 bg-white"
      style="width: 80%; min-width: 240px; max-width: 480px">
      <div style="overflow: auto; height: 100%; width: 100%">
        <div v-if="messages.length==0" class="p1 gray font-12">请到机器人私聊界面,发送文本,图片,小程序等消息</div>
        <div class="weui-cells weui-cells_checkbox">
          <label class="weui-cell weui-cell_active weui-check__label" v-for="message, i in messages">
            <div class="weui-cell__hd">
              <input class="weui-check" type="checkbox" v-model="message.selected" />
              <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
              <message v-bind:message="message"></message>
            </div>
            <div class="weui-cell__ft">
              <div class="font-12 weui-btn weui-btn_mini weui-btn_warn" @click="deleteMessage(message)">删除</div>
            </div>
          </label>
        </div>
        <br />
        <div class="weui-btn weui-btn_primary" @click="getMessages()">更多</div>
        <br />
        <br />
        <br />
      </div>

      <div @click="confirmMessage()" class="center p2 bg-blue white bottom-0 absolute" style="width: 100%">确定</div>
    </div>
  </div>
</div>

<script>
  Vue.component("message", {
    props: ["message"],
    template: `
      <div>
        <div v-if="message.type==6" class="flex items-start">
          <span class="bg-red font-12 px1 mr1 silver">图片</span><img class="border--silver border" v-bind:src="'data:image/png;base64,'+message.payload" style="width:80px;height:80px;" />
        </div>
        <div v-if="message.type==7"  >
          <div><span style="word-break: break-all;" class="bg-gray font-12 px1 mr1 silver">文本</span>{{message.payload}}</div>
        </div>

        <div v-if="message.type==9" class="flex items-start">
          <div><span class="bg-green font-12 px1 mr1 silver">小程序</span>{{message.payload.title}} - {{message.payload.description}}</div>
        </div>

        <div v-if="message.type==14" class="flex items-start">
          <div><span class="bg-green font-12 px1 mr1 silver">链接</span>{{message.payload.title}}</div>
        </div>
      </div>
    `,
  });

  let App = new Vue({
    el: "#app",
    data: function () {
      return {
        showMessages: false,
        activerooms: [],
        messages: [],
        send: {
          _id: "<%=sendid%>",
          mode: 1,
          messages: [],
          month: 0,
          weekdays: {
            0: false,
            1: true,
            2: true,
            3: true,
            4: true,
            5: true,
            6: false,
          },
          rooms: [],
          daytime: "08:05",
        },
      };
    },
    created: function () {
      let that = this;
      axios.get("/client/activerooms").then(function (res) {
        that.activerooms = res.data.rooms;
      });
      if (this.send._id) {
        let loading = weui.loading();
        axios
          .get("/client/send/" + this.send._id)
          .then(function (res) {
            that.send = res.data.send;
            loading.hide();
          });
      }
      this.getMessages();
    },
    methods: {
      toggleRoom: function (room) {
        if (this.send.rooms.includes(room.id)) {
          _.remove(this.send.rooms, (id) => {
            return id == room.id;
          });
        } else {
          this.send.rooms.push(room.id);
        }
        this.$forceUpdate();
      },
      getMessages: function () {

        let that = this;
        let lm = that.messages[that.messages.length - 1];
        let nextid = lm ? lm._id : '';
        axios.get("/client/messages?nextid=" + nextid).then(function (res) {
          that.messages = that.messages.concat(res.data.messages);
          that.$forceUpdate();
        });
      },

      removeMessage: function (i) {
        let spliced = this.send.messages.splice(i, 1);
        spliced = spliced[0];
        this.messages.forEach(function (msg) {
          if (msg._id == spliced._id) {
            msg.selected = false;
          }
        });
      },

      deleteMessage: function (msg) {
        let that = this;
        if (confirm("确认删除素材")) {
          axios.post("/client/message/delete", { _id: msg._id }).then(function (res) {
            that.getMessages();
            weui.toast("删除成功", 200);
          });
        }
      },
      confirmMessage: function () {
        var selected = {};
        var that = this;
        this.send.messages.forEach(function (msg) {
          selected[msg._id] = true;
        });
        this.messages.forEach(function (msg) {
          if (msg.selected) {
            if (!selected[msg._id]) {
              that.send.messages.push(msg);
            }
          }
        });
        this.showMessages = false;
      },
      saveSend: function () {

        this.send.daytime.replace('：', ':')

        // let starts = this.send.daytime.split(':');
        // if(starts[0] && starts[0].length ==2 && starts[1] && starts[1].length ==2){

        // }else{
        //   return weui.topTips("群发时间格式有误, 应为xx:xx");
        // }

        axios
          .post("/client/send", { send: this.send })
          .then(function (res) {
            if (res.data.status) {
              location.href = "/client/page/sendlist";
            } else {
              weui.topTips(res.data.msg);
            }
          });
      },
      removeSend: function () {
        if (confirm("确定删除该群发任务")) {
          axios
            .post("/client/send/" + this.send._id + "/remove")
            .then(function () {
              location.href = "/client/page/sendlist";
            });
        }
      },
    },
  });
</script>